<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Shop</title>
    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">

    <!--font-awesome CDN-->
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <!--font-awesome-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Client.css">

</head>
<body class="has-client-header has-client-nav has-client-footer">

    <main role="main">
        <section class="section-content-title">
            <div class="container">
                <div class="section-title">SHOP</div>
            </div>
        </section>

        <section class="section-shop">
            <div class="container">
                <div class="clearfix">
                    <form action="" class="form-inline form-group-margin fl">
                        <div class="form-group pr">
                            <select name="size" class="form-control" style="min-width: 8em;">
                                <option value="">Any Size</option>
                                <option value="xl">XL</option>
                            </select>
                            <i class="fa fa-caret-down select-caret"></i>
                        </div>
                        <div class="form-group pr">
                            <select name="color" class="form-control" style="min-width: 9em;">
                                <option value="">Any Color</option>
                                <option value="black">black</option>
                            </select>
                            <i class="fa fa-caret-down select-caret"></i>
                        </div>
                        <div class="form-group pr">
                            <select name="sort" class="form-control" style="min-width: 12em;">
                                <option value="0">Default sorting</option>
                                <option value="asc">asc</option>
                                <option value="desc">desc</option>
                            </select>
                            <i class="fa fa-caret-down select-caret"></i>
                        </div>
                    </form>
                    <form action="" class="form-inline fr">
                        <div class="form-group">
                            <div class="input-group addon-right-transparent">
                                <input type="text" class="form-control">
                                <i class="fa fa-search input-group-addon font-rem-1-8"></i>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </section>

        <section class="margin-footer" style="margin-top: 50px;">
            <div class="container">
                <div class="list-group commodity-list-group row" style="margin-bottom: 0;">
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>

                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>

                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                    <div class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="content-img">
                            <a href="./ClientProductDetails.html" class="item-img-link">
                                <img src="images/client-1.png" alt="" class="item-img">
                                <div class="item-img-link-hover">
                                    <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                                </div>
                            </a>
                        </div>
                        <div class="content-describe text-center">
                            <div class="content-describe-title font-rem-1-6">
                                <a href="./ClientProductDetails.html">Pilot Jacket In Woven Fabric</a>
                            </div>
                            <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                        </div>
                    </div>
                </div>
                <nav aria-label="Page navigation" class="clearfix">
                    <ul class="pagination fr">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&lt;</span>
                            </a>
                        </li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&gt;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </section>
    </main>

    <script src="lib/jquery.1.12.4.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>
    <script src="scripts/index.js"></script>
</body>
</html>